<template>
  <div class="sxComplete_wrap">
    <div class="sxComplete_header">确认信息</div>
    <div class="sxComplete_item">
      <div class="item_left"><span>姓名：</span></div>
      <div class="item_right">
        <span>{{ infoData.Name }}</span>
      </div>
    </div>
    <div class="sxComplete_item">
      <div class="item_left"><span>学校：</span></div>
      <div class="item_right">
        <span>{{ infoData.SchoolName }}</span>
      </div>
    </div>
    <div class="sxComplete_item">
      <div class="item_left"><span>实习方向：</span></div>
      <div class="item_right">
        <span>{{ infoData.DirectionName }}</span>
      </div>
    </div>
    <div class="sxComplete_item">
      <div class="item_left"><span>实习小组：</span></div>
      <div class="item_right">
        <span>{{ infoData.GroupName }}</span>
      </div>
    </div>
    <div class="sxComplete_item">
      <div class="item_left"><span>指导员：</span></div>
      <div class="item_right">
        <span>{{ infoData.TeacherName }}</span>
      </div>
    </div>
    <div class="sxComplete_item">
      <div class="item_left"><span>联系电话：</span></div>
      <div class="item_right">
        <span>{{ infoData.TeacherPhone }}</span>
      </div>
    </div>
    <div class="sxComplete_subBtn">
      <a-button size="large" @click="submitApplication">
        提交申请<a-icon type="forward"
      /></a-button>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import Api from "@/request/api";

export default {
  data() {
    return {};
  },
  methods: {
    ...mapMutations("InternshipApply", ["setSpinningState"]),
    //提交实习申请
    submitApplication() {
      //设置提交申请的遮罩层
      this.setSpinningState();
      Api.ApplyGroup({ id: this.SXGroupSelectKey[0] })
        .then((res) => {
          if (res.data.result) {
            setTimeout(() => {
              this.$message.success("申请实习小组成功");
              this.setSpinningState();
            }, 2000);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  computed: {
    ...mapState(["UserInfo"]),
    ...mapState("InternshipApply", [
      "SXGroupName",
      "SXGroupTeacherName",
      "SXGroupTeacherPhone",
      "SXGroupSelectKey",
      "SXDirectionName",
    ]),
    infoData() {
      return {
        Name: this.UserInfo.name,
        SchoolName: this.UserInfo.schoolName,
        DirectionName: this.SXDirectionName,
        GroupName: this.SXGroupName,
        TeacherName: this.SXGroupTeacherName,
        TeacherPhone: this.SXGroupTeacherPhone,
      };
    },
  },
};
</script>

<style lang="less" scope>
.sxComplete_wrap {
  border: 1px solid #ccc;
  width: 40%;
  margin: 0 auto;
  .sxComplete_header {
    font-size: 18px;
    font-weight: 600;
    padding: 1% 3%;
  }
  .sxComplete_item {
    display: flex;
    padding: 1.5% 0;
    font-size: 15px;
    // border-bottom:1px solid red ;
    .item_left {
      width: 25%;
      padding-right: 10px;
      text-align: right;
      font-weight: 600;
      span {
        position: relative;
        &::before {
          content: "*";
          position: absolute;
          top: 2px;
          left: -10px;
          color: red;
        }
      }
    }
    // .item_right {
    //   span {
    //     padding: 0 10px 0 0;
    //   }
    // }
  }
  .sxComplete_subBtn {
    display: flex;
    flex-direction: row-reverse;
    margin: 2% 10%;
    .ant-btn {
      background-color: #67c23a;
      color: white;
      font-weight: 600;
      font-size: 15px;
    }
  }
}
</style>